<template>
	<div class="content" >
		<div class="header">
		      <i class="icon-fanhui iconfont"
		      	 @click='back'>
		      </i>
	    </div>
	  	<scroller  :lock-x='true'
	  				 v-ref:scroller
	  				 >
			<div class="main">
			     <div style="height:50px;"></div>
				 <div class="img"
				       :style="{backgroundImage:'url(http://tnfs.tngou.net/image'+content.img+')'}">
				 </div>
				 <div class="name">{{content.name}}</div>
				<div id="ai">
					
				</div>
			</div>
	  	</scroller>
	<loading :show='contentLoading'></loading>
	</div>
</template>

<script>
	import Scroller from 'vux-com/scroller'
	import Loading from 'vux-com/loading'
	import Vue from 'vue'

	export default{
		components:{
			Scroller,
			Loading
		},
		data(){
			return{
				id:this.$route.params.contentId,
				content:{},
				me:{n:'2'},
				contentLoading:true
			}
		},
		watch:{
			content:function(){
				setTimeout(()=>{
					this.$nextTick(() => {
			    		this.$refs.scroller.reset()
		    		})
				},100)
			}
		},
		methods:{
			back:function(){
				history.go(-1);
				setTimeout(()=>{
					this.contentLoading=true;
				},300)
			},
			getContent:function(){
				let dUrl='http://apis.baidu.com/tngou/cook/show';
				let id=this.id;
				let key='1f3deff0b665a8da11d3150555fafdd1';
				let _this=this;
					Vue.http({
						method:'GET',
						url:dUrl,
						params:{'id':id},
						headers:{'apikey':key},
						_timeout:10000,
						onTimeout:(request)=>{
							console.log('请求超时')
						}
					}).then((response)=>{
						let data=response.data;
						Vue.set(this,'content',data)
					//插入内容
						var ai=document.getElementById('ai');
						ai.innerHTML+=data.message;
						ai.innerHTML+="<style scoped>"+
						"#ai p{line-height:30px;font-size:16px;margin:10px 0 10px 0;}"+
								"#ai h2{line-height:60px;}"+"</style>";
					//隐藏loading
						setTimeout(()=>{
							this.contentLoading=false;
						},300)
					    	
					},(response)=>{console.log('response')}).catch((response)=>{console.log(response)})
			}
		},
		ready:function(){
			this.getContent();
		},
		vuex:{
			getters:{
				allContent:function(state){
					return state.list;
				}
			}
		}	
	}
</script>

<style scoped lang='scss'>
	.name{
		background-color: #caebfb;
		padding: 15px;
		margin:0 10px -10px 10px;
		color: #14a6ef;
		font-weight: bold;
		line-height: 20px;
		font-size: 22px;
	}
	#ai{
		font-family:'微软雅黑';
		background-color: #fff;
		margin:10px;
		line-height: 2em;
		padding: 15px;
	}
	.header{
		height: 50px;
		width: 100%;
		background-color: rgba(255,255,255,0.9);
		position:fixed;
		top: 0px;
		z-index: 9999;
	}
	.main{
		position: relative;
		.img{
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			margin: 10px;
			height: 250px;
		}
	}
	.content{
		position:absolute;
		z-index: 999;
		top: 0px;
		background-color:#ececec;
		min-height:100%;
		width:100%;
	}
	/*iconfont*/
	@font-face {font-family: "iconfont";
	  src: url('../assets/iconfont/iconfont.eot?t=1473085260'); /* IE9*/
	  src: url('../assets/iconfont/iconfont.eot?t=1473085260#iefix') format('embedded-opentype'), /* IE6-IE8 */
	  url('../assets/iconfont/iconfont.woff?t=1473085260') format('woff'), /* chrome, firefox */
	  url('../assets/iconfont/iconfont.ttf?t=1473085260') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
	  url('../assets/iconfont/iconfont.svg?t=1473085260#iconfont') format('svg'); /* iOS 4.1- */
	}

	.iconfont {
	  font-family:"iconfont" !important;
	  font-size:16px;
	  font-style:normal;
	  -webkit-font-smoothing: antialiased;
	  -webkit-text-stroke-width: 0.2px;
	  -moz-osx-font-smoothing: grayscale;
	}
	.icon-fanhui:before { content: "\e635"; font-size: 23px;}
	.icon-fanhui{line-height: 50px;padding-left: 10px;}
</style>